<template>
  <div class="count">
    <h2>当前求和为：{{ sum }}</h2>
    <h3>欢迎来到:{{ school }}，坐落于：{{ address }}</h3>

    <select v-model.number="n">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <button @click="Jia">加</button>
    <button @click="minus">减</button>
  </div>
</template>

<script setup lang="ts" name="Count">
import {ref} from 'vue'
import { useCountStore } from "@/store/Count";
import { storeToRefs } from 'pinia';
import { toRefs } from "vue";

let n = ref(1)
let countStore = useCountStore()
// 以下两种方法都可以拿到state中的数据
console.log('@@@123',countStore.sum);
console.log('@@@456',countStore.$state.sum);

// storeToRefs 将store中的数据变成响应式
let {sum,school,address} = storeToRefs(countStore)
// 注意：不要使用toRefs
// let {sum,school,address} = toRefs(countStore)   
console.log('看一下后果',toRefs(countStore));
 
//虽然这样也能实现响应式
//但是会使countStore中数据和方法都变成了ObjectRefImpl 构造函数的实例对象，代价比较大

function Jia() {
    // 修改state中的数据

    // 第一种: 直接修改   这种改法是通过mutaiton去更改数据的，每有一次更改就会执行一次
    //  countStore.sum += 1  //在Pinia种可以直接进行数据修改 在vuex中需要使用commit

    // 第二种： 利用pinia自身的api      这种办法是通过patch更改数据的，不管配置项里有多少数据都只会执行一次patch
    // countStore.$patch({
    //   sum:888,
    //   school:'尚硅谷',
    //   address:'北京'
    // })
    // 第三种 利用actions配置项    //利用actions 则可以处理一些复杂的逻辑
    countStore.increment(n.value)
}
function minus() {
    countStore.Jian(n.value)
}
</script>

<style scoped>
  .count {
    background-color: skyblue;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px;
  }
  select,button {
    margin: 0 5px;
    height: 25px;
  }
</style>